<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    class="mt-dialog"
    top="15"
    width="80%"
    @close="close"
  >

    <el-container>
      <!-- 顶部搜索栏 -->
      <el-header height="60px">
        <div class="search-bar">
          <el-input v-model="keyword" size="mini" placeholder="输入任意字符 进行筛选" class="search-input">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch">刷新</el-button>
          </el-input>
        </div>
      </el-header>

      <el-container>
        <!-- 左侧功能按钮区域 -->
        <el-aside width="200px" class="function-sidebar">
          <!-- 网站管理 -->
          <div class="button-group">
            <div class="group-title">网站管理</div>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-plus"
              :disabled="listLoading"
              class="sidebar-btn"
              @click="handleNewWebsite"
            >add vhost</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              :disabled="listLoading"
              class="sidebar-btn"
              @click="innerDeleteWebsiteDialogVisible=true"
            >delete vhost</el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-plus"
              :disabled="listLoading"
              class="sidebar-btn"
              @click="innerInstallDialogVisible=true"
            >安装网站</el-button>
          </div>

          <!-- 数据库管理 -->
          <div class="button-group">
            <div class="group-title">数据库</div>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-plus"
              :disabled="listLoading"
              class="sidebar-btn"
              @click="createMysqlDatabaseVisible=true"
            >创建数据库</el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-edit"
              class="sidebar-btn"
              @click="handleModifyDBName"
            >修改数据库</el-button>
          </div>

          <!-- 备份与恢复 -->
          <div class="button-group">
            <div class="group-title">备份恢复</div>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              :disabled="listLoading"
              class="sidebar-btn"
              @click="innerBakcupDialogVisible=true;backuptemp.mysqldatabase_id='';"
            >完全备份</el-button>
          </div>

          <!-- 系统配置 -->
          <div class="button-group">
            <div class="group-title">系统配置</div>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-edit-outline"
              :disabled="listLoading"
              class="sidebar-btn"
              @click="handleInitPsTheme"
            >初始化模板</el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-plus"
              :disabled="listLoading"
              class="sidebar-btn"
              @click="cloudflareVisuable=true"
            >cloudflare</el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-edit"
              :disabled="listLoading"
              class="sidebar-btn"
              @click="handleLnssl"
            >修复HTTPS</el-button>
          </div>

          <!-- 网站操作 -->
          <div class="button-group">
            <div class="group-title">网站操作</div>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-s-check"
              class="sidebar-btn"
              @click="handleEditWebsite"
            >网站信息</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-document"
              class="sidebar-btn"
              @click="handleModifyServerFile"
            >服务器文件</el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-s-check"
              class="sidebar-btn"
              @click="handleAddGoogleVerify"
            >验证google</el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-shield"
              :disabled="listLoading"
              class="sidebar-btn"
              @click="handleAddXmlrpcSecurity"
            >XML-RPC安全</el-button>
            <a v-if="verify_url !== ''" :href="verify_url" target="_blank" class="verify-link-sidebar">google验证链接</a>
          </div>

          <!-- 高级功能 -->
          <div v-if="website_id !== ''" class="button-group">
            <div class="group-title">高级功能</div>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-document"
              class="sidebar-btn"
              @click="wppostreplaceVisible=true"
            >内容替换</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-eleme"
              class="sidebar-btn"
              @click="wcsVisible=true"
            >一键迁移</el-button>
          </div>
        </el-aside>

        <!-- 中间主要内容区域 -->
        <el-main class="main-content">
          <!-- 状态显示 -->
          <div v-if="vhostrecords.length >= 1" class="status-row">
            <el-tag v-if="vhostrecords[0].status===1" type="success">vhost:已经配置</el-tag>
            <el-button v-else type="danger" :loading="true">创建中...</el-button>
            <el-tag v-if="vhostrecords[0].prestashop" type="success">网站程序安装完成</el-tag>
            <el-tag v-else type="danger">网站程序未安装</el-tag>
          </div>

          <!-- Tab内容 -->
          <el-tabs v-model="activeName">
            <el-tab-pane label="数据库备份记录" name="first">
              <div class="tab-content">
                <div class="table-header">
                  <span class="table-title">数据库备份</span>
                  <el-input
                    v-model="mysqlkeyword"
                    clearable
                    placeholder="搜索备份"
                    size="mini"
                    class="table-search"
                  >
                    <el-button slot="append" size="mini" icon="el-icon-search" @click="getMySqlbackups">刷新</el-button>
                  </el-input>
                </div>
                <el-table
                  v-loading="listLoading"
                  :data="mysqlbackups"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%"
                  max-height="400"
                  @sort-change="handleSort"
                >
                  <el-table-column align="center" prop="id" label="id" sortable="custom" width="80" />
                  <el-table-column align="center" label="日期" prop="mysql_backup_at" sortable="custom" />
                  <el-table-column align="center" label="备注" prop="note" sortable="custom" />
                  <el-table-column align="center" label="存储链接" prop="mysql_url" sortable="custom" />
                  <el-table-column align="center" label="操作" width="250">
                    <template slot-scope="scope">
                      <el-button size="mini" type="success" @click="handleGetS3DownloadLink(scope.row.mysql_url)">下载</el-button>
                      <el-button size="mini" type="danger" @click="handleShowRecoverMysqlBackup(scope.row)">恢复</el-button>
                      <el-button size="mini" type="danger" @click="handleDeleteMysqlBackups(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  v-if="mysqlbackups.length"
                  background
                  class="table-pagination"
                  :current-page="mysqlbackups_page"
                  :page-sizes="[10,20,50,100]"
                  :page-size="mysqlbackups_pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="mysqlbackups_total"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="网站备份记录" name="second">
              <div class="tab-content">
                <div class="table-header">
                  <span class="table-title">网站程序备份</span>
                  <el-input
                    v-model="websitekeyword"
                    clearable
                    placeholder="搜索备份"
                    size="mini"
                    class="table-search"
                  >
                    <el-button slot="append" size="mini" icon="el-icon-search" @click="getWebsiteBackups">刷新</el-button>
                  </el-input>
                </div>
                <el-table
                  v-loading="listLoading"
                  :data="data"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%"
                  max-height="400"
                  @sort-change="handleSort"
                >
                  <el-table-column align="center" prop="id" label="id" sortable="custom" width="80" />
                  <el-table-column align="center" label="日期" prop="webfile_backup_at" sortable="custom" />
                  <el-table-column align="center" label="备注" prop="note" sortable="custom" />
                  <el-table-column align="center" label="存储链接" prop="webfile_url" sortable="custom" />
                  <el-table-column align="center" label="操作" width="250">
                    <template slot-scope="scope">
                      <el-button size="mini" type="success" @click="handleGetS3DownloadLink(scope.row.webfile_url)">下载</el-button>
                      <el-button size="mini" type="danger" @click="handleRecoverMySqlBackupWebsite(scope.row)">恢复</el-button>
                      <el-button size="mini" type="danger" @click="handleAction('delete', scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  v-if="data.length"
                  background
                  class="table-pagination"
                  :current-page="page"
                  :page-sizes="[10,20,50,100]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="网站迁移记录" name="third">
              <div class="tab-content">
                <div class="table-header">
                  <span class="table-title">网站迁移记录</span>
                  <el-input
                    v-model="wcstask_keyword"
                    clearable
                    placeholder="搜索迁移记录"
                    size="mini"
                    class="table-search"
                  >
                    <el-button slot="append" size="mini" icon="el-icon-search" @click="getWebsiteChangeServer">刷新</el-button>
                  </el-input>
                </div>
                <el-table
                  v-loading="wcs_listLoading"
                  :data="websitechangeservertasks"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%"
                  max-height="400"
                  @sort-change="handleSort"
                >
                  <el-table-column align="center" prop="id" label="id" sortable="custom" width="80" />
                  <el-table-column align="center" prop="domain" label="domain" />
                  <el-table-column align="center" label="source" prop="source_server_ip" sortable="custom" />
                  <el-table-column align="center" label="target" prop="target_server_ip" sortable="custom" />
                  <el-table-column align="center" label="status" prop="status" sortable="custom" />
                  <el-table-column align="center" label="msg" prop="msg" sortable="custom" />
                  <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                      <el-button size="mini" type="danger" @click="handleMoidfyWcsTask(scope.row)">修改</el-button>
                      <el-button size="mini" type="danger" @click="handleDeleteWcsTask(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  v-if="websitechangeservertasks.length"
                  background
                  class="table-pagination"
                  :current-page="wcs_page"
                  :page-sizes="[10,20,50,100]"
                  :page-size="wcs_pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="wcs_total"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane label="操作日志" name="fourth">
              <div class="tab-content">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in websiteopnotes"
                    :key="index"
                    :timestamp="activity.create_at"
                  >
                    {{ activity.note }}|{{ activity.operator }}
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog
      append-to-body
      :title="title"
      :width="width"
      :visible.sync="innerDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="temp" label-position="left" label-width="160px">

        <el-form-item v-if="action !== 'delete'" label="keyword">
          <el-input v-model="temp.keyword" />
        </el-form-item>

        <el-form-item v-if="action !== 'delete'" label="target">
          <el-input v-model="temp.target" />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="innerDialogVisible = false">取 消</el-button>
        <el-button :type="action !== 'delete'?'primary':'danger'" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      append-to-body
      title="添加备份"
      width="40%"
      :visible.sync="innerBakcupDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="backuptemp" label-position="left" label-width="160px">

        <el-form-item label="note">
          <el-input v-model="backuptemp.note" />
        </el-form-item>
        <el-form-item label="数据库" class="mt-form-item-right">
          <el-select v-model="backuptemp.mysqldatabase_id" placeholder="请选择数据库" size="small" clearable>
            <el-option v-for="item in mysqldatabases" :key="item.id" :label="item.db_name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="网站程序" class="mt-form-item-right">
          <el-switch
            v-model="backuptemp.backupwebsite"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="innerBakcupDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateBackup">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      append-to-body
      title="安装网站程序"
      width="40%"
      :visible.sync="innerInstallDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="installtemp" label-position="left" label-width="160px">

        <el-form-item label="常用系统版本">
          <el-select v-model="version" placeholder="选择版本" @change="function (v) { installtemp.prestashop = v}">
            <el-option label="prestashop 1.6.1.24" value="1.6.1.24" />
            <el-option label="prestashop 1.6.1.20" value="1.6.1.20" />
            <el-option label="wordpress 5.7.2" value="5.7.2" />
            <el-option label="wordpress 4.8.17" value="4.8.17" />
          </el-select>
        </el-form-item>
        <el-form-item label="指定版本号">
          <el-input v-model="installtemp.prestashop" />
          <a href="https://wordpress.org/download/releases/" target="_blank">wordpress版本列表</a>
        </el-form-item>
        <el-form-item label="db name">
          <el-autocomplete
            v-model="installtemp.db_name"
            class="inline-input"
            :fetch-suggestions="queryDBName"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="db password">
          <el-input v-model="installtemp.db_password" />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="innerInstallDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleInstallWebsite">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-loading="restore_mysql_loading"
      append-to-body
      title="恢复到指定数据库"
      width="40%"
      :visible.sync="chooseDatabseVisible"
      :close-on-click-modal="false"
    >
      <span
        style="display: block;margin-bottom: 10px"
      >目标文件:{{ restore_mysql_temp.note }}|{{
        restore_mysql_temp.mysql_url
      }}</span>
      <span>选择恢复到数据库:</span>
      <el-select
        v-model="restore_mysql_temp.mysqldatabase_id"
        placeholder="选择数据库"
        size="mini"
        class="head"
        clearable
      >
        <el-option
          v-for="db in mysqldatabases"
          :key="db.id"
          :label="db.db_name"
          :value="db.id"
        />
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="chooseDatabseVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleRecoverMySqlBackup">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-loading="restore_mysql_loading"
      append-to-body
      title="创建空数据库"
      width="70%"
      :visible.sync="createMysqlDatabaseVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="createMysqlDatabasetemp" label-position="left" label-width="160px">
        <el-form-item label="db name">
          <el-autocomplete
            v-model="createMysqlDatabasetemp.db_name"
            class="inline-input"
            :fetch-suggestions="queryDBName"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="db host">
          <el-input v-model="createMysqlDatabasetemp.db_host" />
        </el-form-item>
        <el-form-item label="db user">
          <el-input v-model="createMysqlDatabasetemp.db_user" />
        </el-form-item>
        <el-form-item label="db password">
          <el-input v-model="createMysqlDatabasetemp.db_password" />
        </el-form-item>
        <el-form-item label="table_prefix">
          <el-input v-model="createMysqlDatabasetemp.table_prefix" />
        </el-form-item>
        <el-form-item label="服务器中创建">
          <el-switch
            v-model="createMysqlDatabasetemp.create_in_server"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createMysqlDatabaseVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateMysqlDatabase">确 定</el-button>
      </span>
      <h2>已经创建的数据库列表</h2>
      <el-table :data="mysqldatabases" border fit highlight-current-row>
        <el-table-column align="center" prop="id" label="id" width="80" />
        <el-table-column align="center" label="db_host" prop="db_host" />
        <el-table-column align="center" label="db_user" prop="db_user" />
        <el-table-column align="center" label="db_password" prop="db_password" />
        <el-table-column align="center" label="db_name" prop="db_name" />
        <el-table-column align="center" label="prefix" prop="table_prefix" />
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDeleteDatabase(scope.row)">删除记录</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      append-to-body
      title="删除网站"
      width="40%"
      :visible.sync="innerDeleteWebsiteDialogVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="deletetemp" label-position="left" label-width="160px">
        <el-form-item label="数据库" class="mt-form-item-right">
          <el-select v-model="deletetemp.mysqldatabase_id" placeholder="请选择数据库" size="small" clearable>
            <el-option v-for="item in mysqldatabases" :key="item.id" :label="item.db_name" :value="item.id" />
          </el-select>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="innerDeleteWebsiteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelWebsite">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      append-to-body
      title="修改数据库名称"
      width="40%"
      :visible.sync="modifydbnameVisible"
      :close-on-click-modal="false"
    >
      <span style="display: block;margin-bottom: 10px">当前配置文件中数据库名:{{ website_config_db_name }}</span>
      <el-form label-position="left" label-width="160px">
        <el-form-item label="db name">
          <el-autocomplete
            v-model="modify_db_name"
            class="inline-input"
            :fetch-suggestions="queryDBName"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifydbnameVisible = false">取 消</el-button>
        <el-button type="primary" @click="doModifyPrestashopDbName">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      v-loading="wppostreplace_loading"
      append-to-body
      title="WordPress post内容替换"
      width="40%"
      :visible.sync="wppostreplaceVisible"
      :close-on-click-modal="true"
    >
      <el-form label-position="left" label-width="160px">
        <el-form-item label="db name">
          <el-autocomplete
            v-model="wppostreplace.db_name"
            class="inline-input"
            :fetch-suggestions="queryDBName"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="old tag">
          <el-input v-model="wppostreplace.old_tag" />
        </el-form-item>
        <el-form-item label="new tag">
          <el-input v-model="wppostreplace.new_tag" />
        </el-form-item>
        <el-form-item label="website id">
          <el-input v-model="wppostreplace.website_id" disabled />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="wppostreplaceVisible = false">取 消</el-button>
        <el-button type="primary" @click="doWpPostReplace">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-loading="wcs_dialog_loading"
      append-to-body
      :title="wcs_dialog_title"
      width="40%"
      :visible.sync="wcs_dialogVisible"
      :close-on-click-modal="true"
    >
      <el-form label-position="left" label-width="160px">
        <el-form-item label="mysqlbackup_id">
          <el-input v-model="wcstask_item.mysqlbackup_id" />
        </el-form-item>
        <el-form-item label="websitebackups_id">
          <el-input v-model="wcstask_item.websitebackups_id" />
        </el-form-item>
        <el-form-item label="cloudflare id">
          <el-select
            v-model="wcstask_item.cloudflareconfig_id"
            placeholder="选择账号"
            style="width: 100%"
            filterable
            reserve-keyword
          >
            <el-option v-for="item in cfconfigs" :key="item.id" :label="item.email" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="restore mysql">
          <el-switch
            v-model="wcstask_item.restore_mysql_success"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item label="restore website">
          <el-switch
            v-model="wcstask_item.restore_website_success"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item label="cloudflare">
          <el-switch
            v-model="wcstask_item.cloudflare_success"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item label="finished">
          <el-switch
            v-model="wcstask_item.finished"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item label="success">
          <el-switch
            v-model="wcstask_item.success"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="wcs_dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doWcsTaskModify">确 定</el-button>
      </span>
    </el-dialog>
    <cloudflareallinone
      :values-visible="cloudflareVisuable"
      :ip="ip"
      :domain="root_domain"
      @closeMyDialog="cloudflareVisuable=false"
    />
    <website_editor
      :domain="root_domain"
      :is-visible="isWebsiteEditorVisible"
      @close="isWebsiteEditorVisible=false"
    />
    <server_file
      :ip="ip"
      :serverstatus_id="serverconfig_id"
      :root_path="root_path"
      :model-visible="isServerFileDialogVisible"
      @closeMyDialog="isServerFileDialogVisible=false"
    />
    <website_change_server
      :operate_website_id="server_change_website_id"
      :source_server_ip="source_server_ip"
      :is-visible="wcsVisible"
      @close="wcsVisible=false"
      @reload="getWebsiteChangeServer"
    />
  </el-dialog>

</template>

<script>
import { Get, Post, Put, Delete, ReStoreMysql, ReStoreWebsite } from '@/api/orders/websitebackups'
import { Get as GetWCSTask, Put as ModifyWscTask, Delete as DeleteWscTask } from '@/api/orders/websitechangeservertask'
import { Get as GetServerStatus, RunWpSqlReplace } from '@/api/orders/serverstatus'
import { Get as GetCFConfig } from '@/api/prestashop/cloudflareconfig'
import { GetS3DownloadLink } from '@/api/eco/common'

import {
  Lnssl,
  CreateBackup,
  CreateNewWebsite,
  DeleteWebsite,
  InstallWebsite,
  PsInitTheme,
  GetPrestashopConfigDbName,
  GoogleDomainVerify,
  ModifyPrestashopConfigDbName,
  AddXmlrpcSecurity
} from '@/api/orders/serverstatus'
import { Get as GetVhostRecord } from '@/api/orders/vhostrecord'
import { Get as GetMySqlBackup, Delete as DeleteMysqlBackups } from '@/api/orders/mysqlbackup'
import { Get as GetWebsiteOpNote } from '@/api/erp/elicink/websiteopnote'
import {
  Get as GetMySqlDatabases,
  Post as CreateMysqlDatabase,
  Delete as DeleteMysqlDatabase
} from '@/api/orders/mysqldatabase'

import cloudflareallinone from './cloudflareallinone'
import qs from 'qs'
import Website_editor from '../../erp/elicink/elements/website_editor'
import Server_file from './server_file'
import Website_change_server from '../../orders/element/websitechangeserver'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}
export default {
  name: 'Backups',
  components: { Website_change_server, Server_file, Website_editor, cloudflareallinone },
  props: ['isVisible', 'website_id', 'website_domain', 'serverconfig_id', 'ip'],
  data() {
    return {
      cfconfigs: [],
      activeName: 'first',
      websitechangeservertasks: [],
      wcstask_keyword: '',
      wcs_page: 1,
      wcs_pagesize: 100,
      wcs_total: 0,
      wcs_listLoading: false,
      wcs_dialogVisible: false,
      wcs_dialog_title: '修改网站迁移',
      wcs_dialog_loading: false,
      wcstask_item: {
        id: '',
        mysqlbackup_id: '',
        websitebackups_id: '',
        restore_mysql_success: false,
        restore_website_success: false,
        cloudflareconfig_id: '',
        cloudflare_success: false,
        finished: false,
        success: false
      },
      source_server_ip: '',
      server_change_website_id: '',
      wcsVisible: false,
      wppostreplaceVisible: false,
      wppostreplace_loading: false,
      wppostreplace: {
        db_name: '',
        old_tag: '',
        new_tag: '',
        website_id: ''
      },
      websiteopnote_loading: false,
      websiteopnotes: [],
      version: '',
      root_path: '',
      isServerFileDialogVisible: false,
      isWebsiteEditorVisible: false,
      verify_url: '',
      website_config_db_name: '',
      modify_db_name: '',
      modifydbnameVisible: false,
      root_domain: '',
      cloudflareVisuable: false,
      dbnames: [],
      vhostrecords: [],
      refreshIntervalId: '',
      innerDeleteWebsiteDialogVisible: false,
      deletetemp: {
        website_id: '',
        mysqldatabase_id: ''
      },
      websitekeyword: '',
      mysqlkeyword: '',
      mysqlbackups: [],
      mysqlbackups_pagesize: 10,
      mysqlbackups_page: 1,
      mysqlbackups_total: 0,
      innerInstallDialogVisible: false,
      createMysqlDatabaseVisible: false,
      restore_mysql_loading: false,
      createMysqlDatabasetemp: {
        website_id: '',
        serverstatus_id: '',
        db_host: 'localhost',
        db_name: '',
        db_user: 'root',
        db_password: 'fscc8XwSYeS2mEZT',
        table_prefix: 'wp_',
        create_in_server: false
      },
      installtemp: {
        website_id: '',
        prestashop: '1.6.1.24',
        db_name: '',
        db_password: 'X8a14HfhhuZAfgNj'
      },
      chooseDatabseVisible: false,
      restore_mysql_temp: {
        'website_id': '',
        'mysqlbackup_id': '',
        'serverstatus_id': '',
        'mysqldatabase_id': '',
        'mysql_url': '',
        'note': ''
      },
      mysqldatabases: [],
      innerBakcupDialogVisible: false,
      backuptemp: {
        website_id: '',
        backupwebsite: true,
        note: '',
        mysqldatabase_id: ''
      },
      data: [],
      keyword: '',
      listLoading: true,
      order_by: '',
      order_desc: '',
      // pagination
      pagesize: 10,
      page: 1,
      total: 0,
      action: null,
      dialogVisible: false,
      title: '',
      temp: {
        keyword: '',
        target: 'Google Shopping'
      },
      width: '',

      innerDialogVisible: false
    }
  },
  watch: {
    website_domain(v) {
      if (v) {
        this.root_domain = v.replace('https://', '')
        this.root_domain = this.root_domain.replace('http://', '')
        this.root_path = '/data/wwwroot/' + this.root_domain
        this.root_domain = this.root_domain.replace('www.', '')
        const db_name = this.root_domain.replace('.com', '').replace('.', '_').replace('-', '_')
        this.createMysqlDatabasetemp.db_name = db_name
        this.installtemp.db_name = db_name
        this.title = this.website_domain + '网站备份列表'
        this.wppostreplace.website_id = this.website_id
        this.server_change_website_id = this.website_id
      }
    },
    ip(v) {
      this.title = this.title + 'IP:' + v
      this.source_server_ip = v
    },
    isVisible(v) {
      this.dialogVisible = v
      if (v) {
        this.server_change_website_id = this.website_id
        this.getWebsiteBackups()
        this.getMySqlbackups()
        this.getMysqldatabases()
        this.handleGetVhostRecord()
        this.handleGetServerConfig()
        this.handleGetWebsiteOpNote()
        this.getWebsiteChangeServer()
        this.GetCloudConfigs()
      }
    }
  },
  methods: {
    GetCloudConfigs() {
      GetCFConfig(null, qs.stringify({
        kw: '',
        pagesize: 100,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.cfconfigs = response.data.data
        }).catch(err => {
          console.log(err)
        })
    },
    handleGetS3DownloadLink(url) {
      GetS3DownloadLink({ url: url }).then(response => {
        window.open(response.url, '_blank')
      }).catch(err => {
        console.log(err)
      })
    },
    doWpPostReplace() {
      if (this.wppostreplace.website_id === '' || this.wppostreplace.old_tag === '') {
        return ''
      }
      this.wppostreplace_loading = true
      RunWpSqlReplace(this.wppostreplace).then(reponse => {
        this.wppostreplace_loading = false
        this.$message({
          type: 'success',
          message: '处理内容替换成功,请去网站检查'
        })
        this.wppostreplaceVisible = false
      }).catch(err => {
        console.log(err)
        this.wppostreplace_loading = false
      })
    },
    handleGetServerConfig() {
      GetServerStatus(this.serverconfig_id, qs.stringify({
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          if (response.data !== undefined) {
            this.createMysqlDatabasetemp.db_user = response.data.db_user
            this.createMysqlDatabasetemp.db_password = response.data.db_password
            this.createMysqlDatabasetemp.db_host = response.data.db_host
            this.createMysqlDatabasetemp.table_prefix = response.data.table_prefix
            this.installtemp.db_password = response.data.db_password
          }
        }).catch(err => {
          console.log(err)
        })
    },
    handleLnssl() {
      this.$confirm('是否确认执行修复HTTPS错误, 如果执行之后无法访问，请立即联系管理员手动修复?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        Lnssl(this.serverconfig_id, {
          website_id: this.website_id
        }).then(response => {
          this.$notify({
            title: '修改成功',
            message: response.msg,
            type: 'success',
            duration: 2000
          })
        }).catch(err => {
          this.$notify({
            title: '修改失败',
            message: err,
            type: 'error',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleInitPsTheme() {
      this.$confirm('是否确认执行初始化模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        PsInitTheme(this.serverconfig_id, {
          website_id: this.website_id
        }).then(response => {
          this.$notify({
            title: '修改成功',
            message: response.msg,
            type: 'success',
            duration: 2000
          })
        }).catch(err => {
          this.$notify({
            title: '修改失败',
            message: err,
            type: 'error',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleAddXmlrpcSecurity() {
      this.$confirm('是否确认添加XML-RPC安全设置，这将提高网站安全性?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        AddXmlrpcSecurity(this.serverconfig_id, {
          website_id: this.website_id
        }).then(response => {
          this.listLoading = false
          this.$notify({
            title: '操作成功',
            message: response.msg,
            type: 'success',
            duration: 2000
          })
        }).catch(err => {
          this.listLoading = false
          this.$notify({
            title: '操作失败',
            message: err.response && err.response.data && err.response.data.msg ? err.response.data.msg : err.message,
            type: 'error',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleGetVhostRecord() {
      GetVhostRecord(null, qs.stringify({
        serverstatus_id: this.serverconfig_id,
        website_id: this.website_id,
        kw: '',
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      })).then(response => {
        this.scrollTop()
        this.vhostrecords = response.data.data
        if (this.vhostrecords[0] !== undefined && this.vhostrecords[0].status === 1) {
          clearInterval(this.refreshIntervalId)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleDeleteMysqlBackups(row) {
      DeleteMysqlBackups(row.id).then(response => {
        this.listLoading = false
        this.getMySqlbackups()
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    getMysqldatabases() {
      this.listLoading = true
      GetMySqlDatabases(null, qs.stringify({
        serverstatus_id: this.serverconfig_id,
        website_id: this.website_id,
        kw: '',
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.scrollTop()
          this.mysqldatabases = response.data.data
          this.mysqldatabases.forEach(item => {
            this.dbnames.push({ 'value': item.db_name })
          })
          if (this.mysqldatabases.length === 1) {
            this.backuptemp.mysqldatabase_id = this.mysqldatabases[0].id
          }

          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    resetTemp() {
      this.temp = {
        keyword: '',
        target: 'Google Shopping'
      }
    },
    resetWcsItem() {
      this.wcstask_item = {
        id: '',
        mysqlbackup_id: '',
        websitebackups_id: '',
        restore_mysql_success: false,
        restore_website_success: false,
        cloudflareconfig_id: '',
        cloudflare_success: false,
        finished: false,
        success: false
      }
    },
    handleMoidfyWcsTask(row) {
      this.resetWcsItem()
      this.wcstask_item.id = row.id
      this.wcs_dialog_title = '修改' + row.domain + '网站迁移任务ID:' + row.id
      this.wcstask_item.mysqlbackup_id = row.mysqlbackup_id
      this.wcstask_item.websitebackups_id = row.websitebackups_id
      this.wcstask_item.restore_mysql_success = row.restore_mysql_success
      this.wcstask_item.restore_website_success = row.restore_website_success
      this.wcstask_item.cloudflareconfig_id = row.cloudflareconfig_id
      this.wcstask_item.cloudflare_success = row.cloudflare_success
      this.wcstask_item.finished = row.finished
      this.wcstask_item.success = row.success
      this.wcs_dialogVisible = true
    },
    doWcsTaskModify() {
      if (this.wcstask_item.id === '') {
        this.warning('task id is none')
        return
      }
      ModifyWscTask(this.wcstask_item.id, this.wcstask_item).then(response => {
        this.$message({
          type: 'success',
          message: response.msg
        })
      })
    },
    handleDeleteWcsTask(row) {
      this.$confirm('确定删除迁移网站' + row.domain + '任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteWscTask(row.id).then(response => {
          this.$message({
            type: 'success',
            message: response.msg
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getWebsiteChangeServer() {
      this.wcs_listLoading = true
      GetWCSTask(null, qs.stringify({
        website_id: this.website_id,
        kw: this.wcstask_keyword,
        pagesize: this.wcs_pagesize,
        page: this.wcs_page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.websitechangeservertasks = response.data.data
          this.wcs_listLoading = false
          this.wcs_total = response.data.total
        }).catch(err => {
          console.log(err)
          this.wcs_listLoading = false
        })
    },
    getWebsiteBackups() {
      this.listLoading = true
      Get(null, qs.stringify({
        website_id: this.website_id,
        kw: this.websitekeyword,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.scrollTop()
          this.data = response.data.data
          this.listLoading = false
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    doModifyPrestashopDbName() {
      if (this.modify_db_name === '') {
        return
      }
      ModifyPrestashopConfigDbName(this.serverconfig_id, {
        'website_id': this.website_id,
        'db_name': this.modify_db_name
      })
        .then(response => {
          this.$message({
            type: 'success',
            message: response.msg
          })
        })
    },
    handleEditWebsite() {
      this.isWebsiteEditorVisible = true
    },
    handleModifyServerFile() {
      this.root_path = '/data/wwwroot/www.' + this.root_domain
      this.isServerFileDialogVisible = true
    },
    handleAddGoogleVerify() {
      this.$prompt('请输入google验证code(不包含.html)', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的code: ' + value
        })
        GoogleDomainVerify(this.serverconfig_id, { code: value, 'website_id': this.website_id }).then(response => {
          this.verify_url = this.website_domain + '/' + value + '.html'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    handleModifyDBName() {
      GetPrestashopConfigDbName(this.serverconfig_id, { 'website_id': this.website_id }).then(response => {
        this.website_config_db_name = response.data
        console.log(this.website_config_db_name)
        this.modifydbnameVisible = true
      })
    },
    handleGetWebsiteOpNote() {
      this.websiteopnote_loading = true
      GetWebsiteOpNote(null, qs.stringify({
        website_id: this.website_id,
        pagesize: 100
      }))
        .then(response => {
          this.websiteopnotes = response.data.data
          this.websiteopnote_loading = false
        }).catch(err => {
          console.log(err)
          this.websiteopnote_loading = false
        })
    },
    getMySqlbackups() {
      this.listLoading = true
      GetMySqlBackup(null, qs.stringify({
        kw: this.mysqlkeyword,
        website_id: this.website_id,
        pagesize: this.mysqlbackups_pagesize,
        page: this.mysqlbackups_page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.scrollTop()
          this.mysqlbackups = response.data.data
          this.listLoading = false
          this.mysqlbackups_total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    handleShowRecoverMysqlBackup(row) {
      this.restore_mysql_temp.mysqlbackup_id = row.id
      this.restore_mysql_temp.mysql_url = row.mysql_url
      this.restore_mysql_temp.note = row.note
      this.restore_mysql_temp.serverstatus_id = this.serverconfig_id
      this.restore_mysql_temp.website_id = this.website_id
      if (this.mysqldatabases.length > 0) {
        this.restore_mysql_temp.mysqldatabase_id = this.mysqldatabases[0].id
      } else {
        this.restore_mysql_temp.mysqldatabase_id = ''
      }

      this.chooseDatabseVisible = true
    },
    handleRecoverMySqlBackup() {
      this.$confirm('此操作会导致当前网站数据切换, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.restore_mysql_loading = true
        ReStoreMysql(this.restore_mysql_temp.mysqlbackup_id, this.restore_mysql_temp).then(response => {
          this.listLoading = false
          this.restore_mysql_loading = false
          this.$message({
            type: 'success',
            message: '命令发送成功，由于执行时间过长，请在钉钉接收完成后的结果!'
          })
        }).catch(() => {
          this.restore_mysql_loading = false
        })
      }).catch(() => {
        this.restore_mysql_loading = false
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleRecoverMySqlBackupWebsite(row) {
      this.$confirm('此操作会导致当前网站数据切换, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ReStoreWebsite(row.id, {
          'website_id': this.website_id,
          'serverstatus_id': this.serverconfig_id
        }).then(response => {
          this.listLoading = false
          this.$message({
            type: 'success',
            message: '命令发送成功，由于执行时间过长，请在钉钉接收完成后的结果!!'
          })
        })
      }).catch(() => {
        this.restore_mysql_loading = false
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleNewWebsite() {
      this.$confirm('新建服务器，请确认服务器IP配置已经修改正确，否则可能会导致数据丢失?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        CreateNewWebsite(this.serverconfig_id, { 'website_id': this.website_id }).then(response => {
          this.listLoading = false
          this.getWebsiteBackups()
          this.getMySqlbackups()
          this.refreshIntervalId = setInterval(this.handleGetVhostRecord, 3000)
          this.$message({
            type: 'success',
            message: '命令发送成功，由于执行时间过长，请在钉钉接收完成后的结果!!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDelWebsite() {
      this.$confirm('删除部署，请确定已经备份了网站，删除配置后网站无法访问,网站数据将会全部删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deletetemp.website_id = this.website_id
        DeleteWebsite(this.serverconfig_id, this.deletetemp).then(response => {
          this.deletetemp.mysqldatabase_id = ''
          this.listLoading = false
          this.getWebsiteBackups()
          this.getMySqlbackups()
          this.$message({
            type: 'success',
            message: '命令发送成功，由于执行时间过长，请在钉钉接收完成后的结果!!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    queryDBName(queryString, cb) {
      console.log(this.dbnames)
      const results = queryString ? this.dbnames.filter(this.createFilter(queryString)) : this.dbnames
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleCreateMysqlDatabase() {
      this.createMysqlDatabasetemp.serverstatus_id = this.serverconfig_id
      this.createMysqlDatabasetemp.website_id = this.website_id
      CreateMysqlDatabase(this.createMysqlDatabasetemp).then(response => {
        this.createMysqlDatabaseVisible = false
        this.getMysqldatabases()
        this.$message({
          type: 'success',
          message: '创建成功'
        })
      })
    },
    handleDeleteDatabase(row) {
      this.$confirm('删除数据库名称' + row.db_name + '记录, 服务器数据库并不会删除，如果要删除需要联系IT手动授权操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteMysqlDatabase(row.id).then(response => {
          this.listLoading = false
          this.getMysqldatabases()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleInstallWebsite() {
      this.listLoading = true
      if (this.serverconfig_id) {
        this.installtemp.website_id = this.website_id
        InstallWebsite(this.serverconfig_id, this.installtemp).then(response => {
          this.listLoading = false
          this.getWebsiteBackups()
          this.getMySqlbackups()
          this.$message({
            type: 'success',
            message: '命令发送成功，由于执行时间过长，请在钉钉接收完成后的结果!!'
          })
          this.innerInstallDialogVisible = false
        })
      } else {
        this.innerInstallDialogVisible = false
      }
    },
    handleCreateBackup() {
      this.listLoading = true
      if (this.serverconfig_id) {
        this.backuptemp.website_id = this.website_id
        CreateBackup(this.serverconfig_id, this.backuptemp).then(response => {
          this.listLoading = false
          this.getWebsiteBackups()
          this.getMySqlbackups()
          this.$message({
            type: 'success',
            message: '命令发送成功，由于执行时间过长，请在钉钉接收完成后的结果!!'
          })
          this.innerBakcupDialogVisible = false
        })
      } else {
        this.innerBakcupDialogVisible = false
      }
    },
    handleAction(action, row) {
      this.action = action
      switch (action) {
        case 'create':
          this.width = '50%'
          this.title = row
          this.resetTemp()
          this.innerDialogVisible = true
          break
        case 'delete':
          this.width = '30%'
          this.title = `确认要删除${row.website__domain}的备份记录吗?`
          this.temp = row
          this.innerDialogVisible = true
          break
        case 'edit':
          this.width = '50%'
          this.title = `修改${row.keyword}`
          this.temp = Object.assign({}, row)
          this.innerDialogVisible = true
          break
      }
    },
    confirm() {
      const _data = this.temp
      switch (this.action) {
        case 'create':
          Post({
            keyword: _data.keyword,
            target: _data.target
          }).then(response => {
            this.innerDialogVisible = false
            this.getWebsiteBackups()
            this.getMySqlbackups()
            this.$emit('reload')
            this.notify('添加成功')
          })
          break
        case 'delete':
          Delete(_data.id).then((response) => {
            this.innerDialogVisible = false
            this.getWebsiteBackups()
            this.$emit('reload')
            this.notify('删除成功')
          })
          break
        case 'edit':
          Put(_data.id, {
            keyword: _data.keyword,
            target: _data.target
          }).then((response) => {
            this.innerDialogVisible = false
            this.$emit('reload')
            this.getWebsiteBackups()
            this.getMySqlbackups()
            this.notify('更新成功')
          })
          break
      }
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getWebsiteBackups()
      this.getMySqlbackups()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getWebsiteBackups()
      this.getMySqlbackups()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getWebsiteBackups()
      this.getMySqlbackups()
      this.handleGetVhostRecord()
      this.handleGetWebsiteOpNote()
      this.getWebsiteChangeServer()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getWebsiteBackups()
      this.getMySqlbackups()
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    close() {
      this.$emit('closeMyDialog', false)
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.top >>> .el-select .el-input {
  width: 350px;
}

.top >>> .input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.top {
  padding-left: 20px;
  margin-bottom: 30px;
  margin-top: 28px;
}

.input-with-select {
  width: 30%;
}

.add-btn {
  float: right;
  margin-right: 20px;
  width: 150px
}

.mt-pagination {
  float: right;
  margin-top: 5px;
}

.app-container >>> .el-dialog {
  margin-top: 48px !important;
  margin-bottom: 68px;
}

.mt-dialog >>> .el-transfer-panel {
  width: calc(50% - 60px);
}

.mt-form >>> .el-select {
  width: 100%;
}

.mt-form >>> .el-input__inner {
  width: 100%;
}

.mt-dialog >>> .el-dialog {
  margin-top: 60px;
}

.mt-dialog >>> .el-dialog__body {
  padding-bottom: 100px;
}

/* 新布局样式 */
.search-bar {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.search-input {
  width: 400px;
  max-width: 100%;
}

/* 左侧功能按钮区域 */
.function-sidebar {
  background-color: #fafafa;
  border-right: 1px solid #e6e6e6;
  padding: 15px 10px;
  overflow-y: auto;
  max-height: 600px;
}

.button-group {
  margin-bottom: 20px;
}

.group-title {
  font-size: 13px;
  font-weight: bold;
  color: #666;
  margin-bottom: 8px;
}

.sidebar-btn {
  width: 100%;
  margin-bottom: 6px;
  text-align: left;
  justify-content: flex-start;
}

.verify-link-sidebar {
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 12px;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 3px;
}

.verify-link-sidebar:hover {
  text-decoration: underline;
}

/* 主内容区域 */
.main-content {
  padding: 0 15px;
}

.status-row {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.status-row .el-tag {
  margin-right: 10px;
}

/* Tab内容样式 */
.tab-content {
  padding: 10px 0;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.table-title {
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

.table-search {
  width: 250px;
}

.table-pagination {
  margin-top: 15px;
  text-align: center;
}

/* 响应式优化 */
@media (max-width: 1400px) {
  .function-sidebar {
    width: 180px !important;
  }

  .sidebar-btn {
    font-size: 12px;
    padding: 6px 8px;
  }

  .group-title {
    font-size: 12px;
  }
}

@media (max-width: 1200px) {
  .search-input {
    width: 100%;
  }

  .table-search {
    width: 200px;
  }
}
</style>
